import React, { useState, useEffect } from 'react'
import { Button, Tag, Table, Card, Form, Modal, Input, Menu, Dropdown, message } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import request from '@/utils/request'
import OperaPrompt from '../../../components/OperaPrompt'
import { DownOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import SearchForm from './search'
import { history } from 'umi'
const { confirm } = Modal
export default () => {

    const [tableData, setTableData] = useState({ list: [], total: 0 })
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [modalVisable, setModalVisable] = useState(false)
    const [searchForm] = Form.useForm()
    const [form] = Form.useForm()
    const columns: any = [
        {
            title: '会员昵称',
            dataIndex: 'nickname',
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
        },
        {
            title: '会员等级',
            render: (text: any) => <Tag color="cyan"> 暂无等级 </Tag>,
            dataIndex: 'level_title',
            hideInSearch: true,
        },
        {
            title: '积分',
            dataIndex: 'integral',
            hideInSearch: true,
        },

        {
            title: '余额',
            dataIndex: 'balance',
            hideInSearch: true,
        },
        {
            title: '成长值',
            dataIndex: 'growth',
            hideInSearch: true,
        },
        {
            title: '标签',
            render: (text: any) => <Tag color="cyan"> 暂无标签 </Tag>,
            dataIndex: 'tag_title',
            hideInSearch: true,
        },
        {
            title: '最后登录时间',
            render: (text: any) => <Tag color="green">2016-01-21 12:32 </Tag>,
            dataIndex: 'last_login_at',
            hideInSearch: true,
        },
        {
            title: '操作',
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Button size="small" type="primary" ghost style={{ marginRight: "6px" }} onClick={() => history.push(`/member/list/detail/${record.id}`)}>详情</Button>
                    <Dropdown overlay={<Menu>
                        <Menu.Item key="0">
                            <a href="http://www.alipay.com/">设置标签</a>
                        </Menu.Item>
                        <Menu.Item key="1">
                            <a onClick={() => setModalVisable(true)}>重置密码</a>
                        </Menu.Item>

                        <Menu.Item key="3" onClick={() => {
                            confirm({
                                title: 'Do you Want to delete this items?',
                                icon: <ExclamationCircleOutlined />,
                                onOk() {
                                    request(`/member/destroy`, {
                                        method: "Delete",
                                        params: { ids: [record.id] }
                                    }).then((result) => {
                                        message.success("删除成功", 1, () => getList())
                                    })
                                }
                            })
                        }}>删除</Menu.Item>
                    </Menu>}
                        trigger={['click']}>
                        <Button size="small" onClick={e => e.preventDefault()}>
                            更多 <DownOutlined />
                        </Button>
                    </Dropdown>
                </>
            ),
        },
    ];

    const rowSelection = {
        selectedRowKeys: selectedKeys,
        onChange: (selectedRowKeys: any) => {
            setSelectedKeys(selectedRowKeys)
        },
    };

    const getList = (params: any = {}) => {
        request(`/member/list`, { params: { pageSize: 15, ...params } }).then((result) => {
            const { list, total } = result.data
            setTableData({ list, total })
        })
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <OperaPrompt dataList={[
                    "会员由平台端进行统一管理，平台可以针对会员进行添加，编辑，锁定，调整账户等操作",
                    "账户类型有用户名、手机、邮箱三种类型，筛选时可以选择其中一种类型并输入对应的内容进行筛选",
                    "点击收起按钮可以将搜索面板隐收起，变成高级搜索按钮"
                ]} />


                <SearchForm form={searchForm} getList={getList} />
                <Table

                    rowKey="id"
                    columns={columns}
                    dataSource={tableData.list}
                    rowSelection={rowSelection}
                    pagination={{ total: tableData.total }}
                    onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
                        getList({ current: pagination.current })
                    }}
                />
                <Modal
                    visible={modalVisable}
                    title="重置密码"
                    onCancel={() => setModalVisable(false)}
                    width="35%"
                    onOk={() => form.submit()}
                >
                    <Form
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 17 }}
                        form={form}
                    >
                        <Form.Item
                            label="新密码"
                            required
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item
                            label="确认新密码"
                            name="confirm_password"
                            dependencies={['password']}
                            required
                            help="请再一次输入密码，两次输入密码须一致"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please confirm your password!',
                                },
                                ({ getFieldValue }) => ({
                                    validator(rule, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject('The two passwords that you entered do not match!');
                                    },
                                }),
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>
                    </Form>
                </Modal>

            </Card>
        </PageHeaderWrapper>
    )
}